"use client";

import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  ganyinData, 
  getSingleQualityFinals, 
  getPostLongFinals,
  getFinalEncoding,
  getToneChineseName
} from "@/lib/ganyin-data";

interface GanyinDisplayProps {
  selectedFinal?: string;
}

export default function GanyinDisplay({ selectedFinal }: GanyinDisplayProps) {
  const [activeTab, setActiveTab] = useState<string>(selectedFinal ? "search" : "single");
  
  const singleQualityFinals = getSingleQualityFinals();
  const postLongFinals = getPostLongFinals();
  
  // 如果有选定的韵母，则只显示该韵母的编码
  const finalsToDisplay = selectedFinal 
    ? [selectedFinal] 
    : (activeTab === "single" ? singleQualityFinals : postLongFinals);

  return (
    <Card className="w-full">
      <CardHeader>
        <CardTitle>干音编码系统</CardTitle>
        <CardDescription>
          {ganyinData.description}
        </CardDescription>
      </CardHeader>
      <CardContent>
        {!selectedFinal && (
          <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-6">
            <TabsList className="grid w-full grid-cols-2">
              <TabsTrigger value="single">单质韵母</TabsTrigger>
              <TabsTrigger value="post-long">后长韵母</TabsTrigger>
            </TabsList>
          </Tabs>
        )}

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {finalsToDisplay.map((final) => {
            const finalData = getFinalEncoding(final);
            if (!finalData) return null;
            
            return (
              <Card key={final} className="overflow-hidden">
                <CardHeader className="bg-muted py-2">
                  <CardTitle className="text-lg">{final} 韵母</CardTitle>
                </CardHeader>
                <CardContent className="pt-4">
                  <div className="space-y-4">
                    {finalData.display.map((display, index) => {
                      const tone = index + 1;
                      const encoding = finalData.encodings[display];
                      
                      return (
                        <div key={display} className="flex items-center justify-between">
                          <div className="flex items-center space-x-2">
                            <span className={`font-bold text-lg tone-${getToneChineseName(tone)}`}>
                              {display}
                            </span>
                            <span className="text-sm text-muted-foreground">
                              {getToneChineseName(tone)}
                            </span>
                          </div>
                          <div className="ganyin-symbol private-use-char">
                            {encoding}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </CardContent>
    </Card>
  );
}